<template>
  <div class="app-container">
    <Table
      ref="table"
      :auto-featch="false"
      :fetch-data="fetchData"
      :options="ops"
      :useAction="false"
    >
      <template #routeId="{ row }">
        {{ row.routeName }}
      </template>
      <template #projectId="{ row }">
        {{ row.projectName }}
      </template>
      <template #periodId="{ row }">
        {{ row.periodTimeName }}
      </template>
      <template #default>
        <el-table-column label="操作" align="center" key="cz" prop="cz">
          <template #default="{ row }">
            <el-button type="text" @click="openDialog(row)">修改排序</el-button>
          </template>
        </el-table-column>
      </template>
    </Table>

    <el-dialog
      append-to-body
      v-model="paixuDialog"
      width="40%"
      title="修改排序"
    >
      <template #default>
        <el-form label-width="100px" label-position="left">
          <el-form-item label="排序">
            <el-input type="number" v-model="pointOrder"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="close()"> 取 消 </el-button>
          <el-button type="primary" @click="onSubmit()"> 确 认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/znxj/xjlx.js";
import { apis as XJDW } from "@/api/znxj/xjdw.js";
import formJson from "./inner.json";
const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});

const { proxy } = getCurrentInstance();
const props = defineProps({
  parentNode: {
    type: Object,
    default: () => ({}),
  },
});

const table = ref();
const filterForm = ref({});

const paixuDialog = ref(false);
const pointOrder = ref(0);
const selectRow = ref({});
const openDialog = (row) => {
  paixuDialog.value = true;
  selectRow.value = row;
  pointOrder.value = row.pointOrder;
};
const close = () => (paixuDialog.value = false);
const onSubmit = () => {
  if (!pointOrder.value) {
    return proxy.$modal.msgError("请输入序号");
  }
  XJDW.update({ ...selectRow.value, pointOrder: pointOrder.value }).then(
    (res) => {
      close();
      getList();
    }
  );
};
const { fetchData, getList } = useAsyncData({
  APIS: {
    query: APIS.queryPointList,
  },
  table,
  proxy,
  filterForm: filterForm.value,
});
watch(
  () => props.parentNode,
  (val) => {
    filterForm.value.pointId = val.id || null;
    getList();
  },
  {
    deep: true,
  }
);
const changeParent = (p) => {
  filterForm.value.pointId = p.id || null;
  getList();
};
defineExpose({
  changeParent,
});
</script>

<style lang="scss" scoped></style>
